import { useState } from "react";
import GpuCanvas from "../../components/GpuCanvas";
import DatGui, { DatSelect, DatFolder, DatButton, DatNumber } from "react-dat-gui";

export default function NormalMap() {
  const appName = "NormalMap";
  const [selectedData, setSelectedData] = useState({
    "Bump Mode": "Normal Map",
    cameraPosX: 0.0,
    cameraPosY: 0.8,
    cameraPosZ: -1.4,
    lightPosX: 1.7,
    lightPosY: 0.7,
    lightPosZ: -1.9,
    lightIntensity: 5.0,
    depthScale: 0.05,
    depthLayers: 16,
    Texture: "Spiral",
    "Reset Light": () => {
      return;
    },
  });
  return (
    <div style={{
        width: '100%',
        height: '100%',
    }}>
      <GpuCanvas app={appName} data={selectedData}/>
      <DatGui data={selectedData} onUpdate={setSelectedData}>
        <DatSelect
          path="Bump Mode"
          options={[
            "Albedo Texture",
            "Normal Texture",
            "Depth Texture",
            "Normal Map",
            "Parallax Scale",
            "Steep Parallax",
          ]}
          label="Bump Mode"
        />
        <DatSelect path="Texture" options={["Spiral", "Toybox", "BrickWall"]} />
        <DatFolder title="Light" closed>
          <DatButton label="ResetLight" onClick={() => {
            setSelectedData({
              ...selectedData,
              lightPosX: 1.7,
              lightPosY: 0.7,
              lightPosZ: -1.9,
              lightIntensity: 5.0,
            });
          }} />
          <DatNumber path="lightPosX" label="LightPosX" min={-5} max={5} step={0.01} />
          <DatNumber path="lightPosY" label="LightPosY" min={-5} max={5} step={0.01} />
          <DatNumber path="lightPosZ" label="LightPosZ" min={-5} max={5} step={0.01} />
          <DatNumber path="lightIntensity" label="LightIntensity" min={0} max={10} step={0.01} />
        </DatFolder>
        <DatFolder title="Depth" closed={false}>
          <DatNumber path="depthScale" label="DepthScale" min={0} max={0.1} step={0.01} />
          <DatNumber path="depthLayers" label="DepthLayers" min={1} max={32} step={1} />
        </DatFolder>
      </DatGui>
    </div>
  );
}
